<!-- NoteManager.vue -->
<template>
    <div>
        <div style="padding: 20px;">
            <!-- 新增按钮 -->
          <el-button type="primary" @click="handleAdd">新增菜品分类</el-button>
        </div>
      <el-table :data="noteList">
        <el-table-column label="序号" align="center" type="index" :index="indexMethod" />
        <el-table-column label="分类名称" align="center" prop="category_name" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.category_statu === 0 ? 'success' : 'danger'">
              {{ scope.row.category_statu === 0 ? '正常' : '失效' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否禁用" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.category_statu"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否禁用" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增/修改对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="currentRow">
          <el-form-item label="分类名称">
            <el-input v-model="currentRow.category_name" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getCategoryList, handleStatusChange, insertCategory, updateCategory } from "@/api/note";
  
  export default {
    name: "NoteManager",
    data() {
      return {
        noteList: [], // 表格中显示的数据
        dialogVisible: false, // 控制对话框的显示与隐藏
        currentRow: { category_id: "", category_name: "" }, // 当前行数据
        isEdit: false, // 是否为编辑模式
        dialogTitle: "新增菜品分类", // 对话框标题
      };
    },
    created() {
      this.getCategoryList();
    },
    methods: {
      /** 查询笔记列表 */
      getCategoryList() {
        getCategoryList().then(response => {
          if (response.code === 200) {
            this.noteList = response.data[0]; // 将嵌套数组赋值给 noteList
          }
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.currentRow = { category_id: "", category_name: "" }; // 初始化表单
        this.isEdit = false; // 设置为新增模式
        this.dialogTitle = "新增菜品分类"; // 设置对话框标题
        this.dialogVisible = true; // 显示对话框
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.currentRow = { ...row }; // 克隆当前行数据
        this.isEdit = true; // 设置为编辑模式
        this.dialogTitle = "修改菜品分类"; // 设置对话框标题
        this.dialogVisible = true; // 显示对话框
      },
      /** 保存新增/修改 */
      save() {
        if (this.isEdit) {
          updateCategory(this.currentRow.category_name,this.currentRow.category_id).then(response => {
            if (response.code === 200) {
              this.$message.success('修改成功');
              this.getCategoryList(); // 刷新列表
            } else {
              this.$message.error('修改失败');
            }
          }).catch(() => {
            this.$message.error('修改失败');
          });
        } else {
            insertCategory(this.currentRow.category_name).then(response => {
            if (response.code === 200) {
              this.$message.success('新增成功');
              this.getCategoryList(); // 刷新列表
            } else {
              this.$message.error('新增失败');
            }
          }).catch(() => {
            this.$message.error('新增失败');
          });
        }
        this.dialogVisible = false; // 关闭对话框
      },
      /** 处理状态切换 */
      handleStatusChange(row) {
        handleStatusChange(row.category_name, row.category_statu).then(response => {
          if (response.code === 200) {
            this.$message.success('状态更新成功');
            this.getCategoryList(); // 刷新列表
          } else {
            this.$message.error('状态更新失败');
          }
        }).catch(() => {
          this.$message.error('状态更新失败');
        });
      },
      /** 自定义序号生成方法 */
      indexMethod(index) {
        return index + 1;
      }
    }
  };
  </script>